<template>
  <!-- 参考链接2 https://juejin.cn/post/6958444822059286559 -->
  <div class="container">
    <h1>测试上传图片排序2</h1>

    <div class="uploadWrapper">
      <vuedraggable
        class="vue-draggable"
        draggable=".draggable-item"
        tag="ul"
        v-model="imgList"
      >
        <li
          style="width: 100px; height: 100px"
          :key="item + index"
          class="draggable-item"
          v-for="(item, index) in imgList"
        >
          <el-image :preview-src-list="imgList" :src="item"></el-image>
        </li>
      </vuedraggable>
      <el-button @click="show">show</el-button>
    </div>
  </div>
</template>

<script>
// import screenfull from 'screenfull'

export default {
  data() {
    return {
      imgList: [
        "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa97b2676a3d4774950297c8c439e8bd~tplv-k3u1fbpfcp-watermark.image",
        "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6de6be3260348b68aba33342d420e39~tplv-k3u1fbpfcp-watermark.image",
        "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b546d01598404e70a5b23ec7b40785ed~tplv-k3u1fbpfcp-watermark.image",
      ],
    };
  },
  methods: {
    show() {
      console.log(this.imgList);
       screenfull.toggle()
    },
  },
};
</script>

<style>
.uploadWrapper li {
  width: 70px;
  display: inline-block;
  margin: 0 10px;
}
</style>
